﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<!-- 移动端设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>sim-captcha</title>
	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<div id="app" class="container" style="margin:200px auto;">
		<div class="row">
			<div class="col-md-4 col-md-offset-4">
				<div class="form">
					<div class="form-group">
						<label>用户名</label>
						<input id="js-input-userName" type="text" class="form-control">
					</div>
					<div class="form-group">
						<label>密码</label>
						<input id="js-input-password" type="password" class="form-control">
					</div>
					<div>
						<input id="js-ticket" type="hidden">
						<input id="js-userId" type="hidden">
					</div>
					<button id="js-btn-verify" class="btn btn-gray btn-block">点击验证</button>
					<button id="js-btn-login" class="btn btn-info btn-block" style="margin-top:14px;">登录</button>
				</div>
			</div>
		</div>
	</div>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<!-- 加载 SimCaptcha 前端的js实现 -->
	<script src="https://cdn.jsdelivr.net/npm/sim-captcha@0.1.1/dist/sim-captcha.min.js"></script>
<script>
	function successCallback(res) {
		if (res.code === 0) {
			// 验证码服务端-验证通过
			console.log("第一次验证通过");
			// 第一次验证通过
			$("#js-btn-verify").text("验证通过");
			$("#js-btn-verify")[0].className = "btn btn-success btn-block";
			// 准备 业务后台 第二次验证
			$("#js-ticket").val(res.ticket);
			$("#js-userId").val(res.userId);
			console.log("第一次验证 结束");
		}
	}

	$(function () {

		// 点击验证
		window.simCaptcha = new SimCaptcha({
			element: document.getElementById("js-btn-verify"),
			appId: "132132",
			callback: successCallback,
			// baseUrl: "http://localhost:5004"
			baseUrl: "https://captcha.moeci.com"
		});

		$("#js-btn-login").click(function () {
			// 获取用户名(手机号/邮箱), 密码, 票据
			var userName = $("#js-input-userName").val().trim();
			var password = $("#js-input-password").val();
			var ticket = $("#js-ticket").val();
			var userId = $("#js-userId").val();
			if (!userName || !password) {
				alert("请输入账号密码");
				return false;
			} else if (!ticket || !userId) {
				alert("请点击验证");
				return false;
			}

			$.ajax({
				url: "/home/login",
				type: "POST",
				data: { "userName": userName, "password": password, "ticket": ticket, "userId": userId },
				dataType: "json",
				success: function (data) {
					if (data.code == -10) {
						// 账号或密码错误
						alert("账号或密码错误");
					} else if (data.code == -11) {
						alert("请点击验证")
					} else if (data.code == -12) {
						alert("请输入账号,密码")
					} else if (data.code < 0) {
						// 验证不通过
						console.log(data);
						$("#js-btn-verify").text("验证失败, 请重新点击验证");
						$("#js-btn-verify")[0].className = "btn btn-gray btn-block";
						$("#js-ticket").val("");
						$("#js-userId").val("");
					} else {
						// 一切正确
						alert("登陆成功");
					}
				}
			});
		});

	});
</script>
</body>

</html>